import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { Table, Row, Col, Button } from 'antd';
import { hashHistory } from 'react-router';

import {
	getListRelationships,
	getRelationById
} from '../../action';

class RelationList extends Component {
	constructor(props) {
		super(props);
		this.columns = [
			{ title: '边类型', dataIndex: 'relationType', key: 'relationType', render: (text, record) => {
				return record && record.type;
			} },
			{ title: '左节点', dataIndex: 'startNode', key: 'startNode', render: (text, record) => {
				return record && record.startNode;
			} },
			{ title: '右节点', dataIndex: 'endNode', key: 'endNode', render: (text, record) => {
				return record && record.endNode;
			} },
			{ title: '操作', dataIndex: '', className: 'center-col', key: 'action', render: this.renderAction }
		];
		this.state = {}
	}
	componentDidMount() {
		this.props.dispatch(getListRelationships());
	}
	addRelation = () => {
		hashHistory.push('/relationcreator');
	}
	editRelation = (record) => {
		hashHistory.push(`/relationeditor/${record.id}`);
	}
	deleteRelation = () => {
		hashHistory.push('/relationview');
	}
	renderAction = (text, record) => {
		return (
			<div>
				<span style={{color: '#2baee9', cursor: 'pointer'}} onClick={this.editRelation.bind(null, record)}>编辑</span>
				<span style={{color: '#2baee9', cursor: 'pointer'}} onClick={this.deleteRelation}> | 删除</span>
			</div>
		)
	}
	render() {
		const columns = this.columns;
		const dataSource = this.props.relationshipList.map((item, index) => {
			return Object.assign(item, {key: index})
		});
		return (
			<div style={{margin: '0px 20px'}}>
				<Row style={{margin: '10px 0px', height: 60, borderBottom: '1px solid #eee'}}>
					<span style={{fontSize: 18, position: 'relative', top: 12}}>关系列表</span>
					<Button className="reedsec_btn" type="primary" size="large" onClick={this.addRelation}>新增</Button>
				</Row>
				<Row>
					<Table className="reedsec_table" columns={columns} dataSource={dataSource} pagination={false}/>
				</Row>
			</div>
		)
	}
}

function mapState2Props(state) {
	let { graphData: {relationships, nodes, relationshipList} } = state;
	return { relationships, nodes, relationshipList };
}

RelationList = connect(mapState2Props)(RelationList);

export default RelationList;
